<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="../../../header.jsp"%>
<script type="text/javascript">

var detailValidator;

function saveDetail() {
	if (!detailValidator.form()) {
		return;
	}
	doSaveDetail();
}

function doSaveDetail() {
	var data = {
			id : $("#roleId").val(),
			name : $("#roleName").val(),
			code : $("#roleCode").val(),
			description : $("#roleDesc").val()
		};
	
	$.ajax({
		type: "POST",
		url: "save.json",
		data: data,
		success: saveSucceedCallback,
		error:function(message){
			$.alert(message);
		}
	});
}

function saveSucceedCallback(data) {
	if (!data.succeed) {
		$.notice(data.message);
		return;
	}

	$("#roleId").val(data.data.id);
	$.notice("保存成功！");
}

$(document).ready(function() {
	var ViewModal = function(name,code,description) {
		this.name = ko.observable(name);
			this.code = ko.observable(code);
				this.description = ko.observable(description);
	}; 

	ko.applyBindings(new ViewModal("testname","testcode","testdescription"));
	
	detailValidator = $("#detailForm").validate({
		rules: {
			roleName:{required:true},
			roleCode:{required:true}
		},
		messages:{
			roleName:{required:"请输入名称"},
			roleCode:{required:"请输入编码"}
		}
	});
	
});

</script>

<div class="span9">

<div class="page-header">
<h1>角色管理</h1>
<div class="cms_toolbar">
<a href="/biz/system/role/"><i class="icon-arrow-left"></i>返回</a>
</div>
</div>

<div id="tabs">

<ul class="nav nav-tabs">
<li class="active"><a href="#detailPanel" data-toggle="tab">基本信息</a>
</li>
<li><a href="#bindUserPanel" data-toggle="tab">绑定用户</a>
</li>
</ul>


<div class="tab-content">
<div id="detailPanel" class="tab-pane fade in active">

<form id="detailForm" class="form-horizontal">
<input type="hidden" id="roleId" value="${data.id}">
	<fieldset>
		<div class="control-group">
			<label for="roleName"  class="control-label">名称：</label>
			<div class="controls">
				<input data-bind="value:name" type="text" id="roleName" name="roleName" value="${data.name}"> <span class="cms_color_required">*</span>
			</div>
		</div>
		<div class="control-group">
			<label for="roleCode"  class="control-label">编码：</label>
			<div class="controls">
				<input data-bind="value:code" type="text" id="roleCode" name="roleCode" value="${data.code}"> <span class="cms_color_required">*</span>
			</div>
		</div>
		<div class="control-group">
			<label for="roleDesc"  class="control-label">描述：</label>
			<div class="controls">
				<textarea data-bind="text:code" id="roleDesc" name="roleDesc">${data.description}</textarea>
			</div>
		</div>
		<div class="form-actions">
			<a href="#" class="btn btn-primary" onclick="saveDetail()"><i class="icon-ok"></i>保存</a>
		</div>
	</fieldset>
</form> 

</div>

<div id="bindUserPanel" class="tab-pane fade">


<table id="queryResult" class="table table-striped cms-table">

<thead>
<tr>
<td width="20" title="点击可选择或取消列表中的所有项"><input id="selectAllBox" type="checkbox" onclick="selectAll()"></td>
<td width="100" title="点击项目名称可以查看详情">姓名</td>
<td width="75">账号</td>
<td width="50">是否激活</td>
<td width="50">WEB访问</td>
<td width="50">手机访问</td>
<td width="100">单位</td>
<td>描述</td>
<td width="50">操作</td>
</tr>
</thead>

<tbody id="queryResultBody"> 
</tbody>
</table>
<a href="javascript:;" class="btn btn-info" onclick="showMore()">查看更多...</a>


<form class="form-horizontal">
<div class="form-actions">
	<a href="#" class="btn btn-primary" onclick="unbindUser()"><i class="icon-plus"></i>添加</a>
	<a href="#" class="btn btn-warning" onclick="bindUser()"><i class="icon-minus"></i>删除</a>
</div>
</form>


</div>

</div>


</div>



</div>




<table id="listItemTemplate" style="display:none;">
<tr>
<td><input type="checkbox"></td>
<td><a href="#"><span></span></a></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><a href="#"><span>修改</span></a></td>
</tr>
</table>

<%@ include file="../../../footer.jsp"%>